<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Date_V4.aspx.cs" Inherits="Date_V4" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<title>jQuery Tools standalone demo</title>

	<!-- include the Tools -->
	<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>

	 

	<!-- standalone page styling (can be removed) -->
	<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>	


<!-- dateinput styling -->
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/demos/dateinput/css/large.css"/>

<style>

#calendar {
	height:400px;
	width:410px;
	float:left;
}

#theday {
	-moz-border-radius:5px;
	background-color:#36387B;
	color:#FFFFFF;
	float:left;
	font-size:90px;
	height:80px;
	line-height:50px;
	margin-top:30px;
	padding:60px;
	text-shadow:0 0 5px #DDDDDD;
	width:117px;
}

#theday span {
	display:block;
	font-size:16px;
	text-align:center;		
}
</style>

</head>

<body>	




<!-- wrapper element -->
<div id="calendar">
	<input type="date" name="mydate" value="0" />

</div>

<!-- large date display -->
<div id="theday"></div>

<br clear="all"/>

<!-- make it happen -->
<script>
$(function() {

// initialize dateinput
$(":date").dateinput( {
		
	// closing is not possible
	onHide: function()  {
		return false; 
	},
	
	// when date changes update the day display
	change: function(e, date)  {
		$("#theday").html(this.getValue("dd<span>mmmm yyyy</span>")); 
	}
		
// set initial value and show dateinput when page loads	
}).data("dateinput").setValue(0).show();
});
</script> 
</body>

</html>
